import { province, city, school } from "./data.js";

const provinceDom = document.querySelector(".province-select");
const cityDom = document.querySelector(".city-select");
const schoolDom = document.querySelector(".school-select");

for (const prov in province) {
    const optionDom = document.createElement("option");
    optionDom.value = prov;
    optionDom.innerText = province[prov];
    provinceDom.appendChild(optionDom);
}

provinceDom.onchange = function () {
    let provinceValue = provinceDom.value;
    cityDom.innerHTML = ""
    schoolDom.innerHTML = ""
    for (const cityId in city) {
        if (provinceValue === cityId) {
            const citys = city[cityId]
            for (const c in citys) {
                const optionDom = document.createElement("option");
                optionDom.value = c;
                optionDom.innerText = citys[c];
                cityDom.appendChild(optionDom);
            }
        }
    }
}

cityDom.onchange = function () {
    let cityValue = cityDom.value;
    schoolDom.innerHTML = ""
    for (const schoolId in school) {
        if (cityValue === schoolId) {
            const schoolArr = school[schoolId];
            for (const item of schoolArr) {
                const optionDom = document.createElement("option");
                optionDom.innerText = item;
                schoolDom.appendChild(optionDom);
            }
        }
    }
}